/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="PhasePedSelect">
    <div class="item">
      <div class="name">{{$t('openatccomponents.channel.phaseVehicle')}}</div>
      <div class="content">
        <template v-for="(ring, index) in phaseDirection">
          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)" :style="getStyle(ring)">
            <xdrdirselector
                  Width="75PX"
                  Height="75PX"
                  Widths="65PX"
                  Heights="65PX"
                  :Data="Data"
                  :showlist="ring.desc"
                  :roadDirection="roadDirection"></xdrdirselector>
            <div class="num">{{ring.id}}</div>
          </div>
        </template>
      </div>
    </div>
    <div class="item">
      <div class="name">{{$t('openatccomponents.channel.phasePedestrian')}}</div>
      <div class="content">
        <template v-for="(ring, index) in pedDirection">
          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)">
            <xdrdirselector
                  Width="75PX"
                  Height="75PX"
                  Widths="65PX"
                  Heights="65PX"
                  :Datas="Datas"
                  :showlist="ring.desc"
                  :roadDirection="roadDirection"></xdrdirselector>
            <div class="num">{{ring.id}}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import xdrdirselector from '../XRDDirSelector/XRDDirSelector.vue'
import { getTheme } from '../../../utils/auth'

export default {
  name: 'PhasePedSelect',
  components: {
    xdrdirselector
    // patternwalksvg
  },
  props: {
    closePhaseRings: {
      type: Array,
      default: () => []
    },
    sidewalkPhaseData: {
      type: Array,
      default: () => []
    },
    headerText: {
      type: String
    },
    list: {
      type: Array,
      default () {
        return []
      }
    },
    roadDirection: {
      type: String
    }
  },
  data () {
    return {
      Data: {
        left: '10PX',
        top: '10PX'
      },
      Datas: {
        left: '12PX',
        top: '8PX'
      },
      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
      backgroundBase: getTheme() === 'light' ? '#606266' : '#fff',
      backgroundSelected: getTheme() === 'light' ? '#606266' : '#fff',
      phaseList: [],
      pedPhaseList: [],
      phaseDirection: [],
      pedDirection: [],
      style: {},
      params: {
        'phases':
          [
            {
              'id': 1,
              'type': 0
            },
            {
              'id': 2,
              'type': 2
            },
            {
              'id': 3,
              'type': 3
            }
          ]
      }
    }
  },
  watch: {
    closePhaseRings (val) {
      console.log('closePhaseRings', val)
      console.log('sidewalkPhaseData', this.sidewalkPhaseData)
      let tempPhaseList = []
      for (let ring of this.closePhaseRings) {
        let phases = ring.phases
        tempPhaseList = [...tempPhaseList, ...phases]
      }
      tempPhaseList = tempPhaseList.sort((a, b) => a.id - b.id)
      let tempPhaseListCopy = JSON.parse(JSON.stringify(tempPhaseList))
      tempPhaseList = tempPhaseList.map(item => {
        item.selected = false
        item.desc.map(des => {
          des.color = this.themeColor
          des.peddirection = []
          return des
        })
        return item
      })
      this.phaseDirection = JSON.parse(JSON.stringify(tempPhaseList))
      let tempPedList = tempPhaseListCopy.filter(item => item.peddirection && item.peddirection.length > 0)
      console.log('tempPhaseList', tempPedList)
      tempPedList = tempPedList.map(item => {
        item.selected = false
        item.desc.map(des => {
          des.id = 0
          des.color = this.themeColor
          des.peddirection = des.peddirection.map(dir => {
            dir.color = this.themeColor
            return dir
          })
          return des
        })
        return item
      })
      this.pedDirection = JSON.parse(JSON.stringify(tempPedList))
    }
  },
  methods: {
    getStyle (ring) {
      return this.style
    },
    onCardClick (item, index) {
      item.selected = !item.selected
      let res = this.getParams()
      this.$emit('onPhasePedSelectChange', res)
    },
    getParams () {
      console.log('phaseDirection', this.phaseDirection)
      console.log('pedDirection', this.pedDirection)
      console.log('closePhaseRings', this.closePhaseRings)
      this.params.phases = []
      for (let i = 0; i < this.phaseDirection.length; i++) {
        let type = 0
        let phase = this.phaseDirection[i]
        let id = phase.id
        let isPhaseSelected = phase.selected
        if (isPhaseSelected) {
          type = 2
        }
        let ped = this.pedDirection.find(item => item.id === id)
        if (ped) {
          let isPedSelected = ped.selected
          if (isPhaseSelected && isPedSelected) {
            type = 1
          } else if (isPhaseSelected && !isPedSelected) {
            type = 2
          } else if (!isPhaseSelected && isPedSelected) {
            type = 3
          } else if (!isPhaseSelected && !isPedSelected) {
            type = 0
          }
        }
        let phaseItem = {
          id: id,
          type: type
        }
        this.params.phases.push(phaseItem)
      }
      let res = this.params.phases
      return res
    }
  }
}
</script>
